<template>
  <div>
    <div style="padding: 10px 0">
      <el-input style="width: 500px;margin-left:20px" suffix-icon="el-icon-search" placeholder="请输入名称" v-model="uniName"></el-input>
      <el-button style="margin-left: 20px;width: 100px" type="primary" @click="load">搜索</el-button>
    </div>

    <div class="tableM">
      <div class="tableMain"
           v-loading="menuLoading">
        <el-row style="height: 300px;margin-left: 20px"
                class="list"
                v-for="uni in uniData"
                :key="uni.cid"
        >
          <el-col class="list-item" :span="3">
            <el-image
                style="width: 170px; height: 170px;"
                :src="uni.logoUrl"
                :fit="'fill'"></el-image>
          </el-col>
          <el-col class="list-item" :span="6" style="margin-top: 10px">
            <el-row>
              <div>
                <el-link type="primary" style="font-size: 20px;margin-left: 10px" @click="jumpTo(uni.universityName)">{{ uni.universityName }}</el-link>
              </div>
              <el-divider/>
            </el-row>
            <el-row>
              <el-col>
                <el-descriptions class="margin-top" :column="2" :size="'medium'" border style="width: 1000px">
                  <el-descriptions-item span="1">
                    <template slot="label" style="width: 70px">
                      <i class="el-icon-office-building"></i>
                      院校所在地
                    </template>
                    {{uni.location}}
                  </el-descriptions-item>
                  <el-descriptions-item span="1">
                    <template slot="label">
                      <i class="el-icon-mobile-phone"></i>
                      高校类型
                    </template>
                    {{uni.type}}
                  </el-descriptions-item>
                  <el-descriptions-item span="1">
                    <template slot="label">
                      <i class="el-icon-location-outline"></i>
                      高校隶属
                    </template>
                    {{ uni.admin }}
                  </el-descriptions-item>
                  <el-descriptions-item span="1">
                    <template slot="label">
                      <i class="el-icon-tickets"></i>
                      联系电话
                    </template>
                    {{ uni.phone }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>

            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="padding: 10px 0">
      <div class="block" style="margin-left: 50px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,15,20,25]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="TotalD">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style>
.tableMain{
  border-bottom: gray;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.tableM{
  overflow:auto;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

</style>

<script>

export default {
  created(){
    this.load()
  },
  data() {
    return {
      TotalD:0,
      pageNum:1,
      pageSize:10,
      uniName:"",
      uniData: [],
      menuLoading:true
    }
  },
  methods:{
    load(){
      this.menuLoading=true
      this.$forceUpdate()
      this.request.get("/uniInfo/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          uniName:this.uniName
        }
      }).then(res => {
        // console.log(res)
        this.uniData=res.result.records
        this.TotalD=res.result.total
      })
      setTimeout(()=>{this.menuLoading=false},500)
    },
    handleCurrentChange(pageNum){
     this.pageNum=pageNum
      this.load()
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    jumpTo(uniName){
      this.$router.push({
        name:"Detail",
        params:{
          uN:uniName
        }
      })
    }

  }
}
</script>